<template>
  <div>
    <div>
      <el-table
        :data="landLordData"
        height="564"
        border
        style="width: 100%"
        :row-style="{ height: '52.5px' }"
      >
        <el-table-column prop="uname" label="姓名" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="idcard"
          label="身份证号"
          width="180"
          align="center"
        >
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination :total="companiesCount" @transfer="CurrentChange">
        </pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getLandLordAPI } from '@/api/getLandlordAPI'
import pagination from '@/components/pagination/MyPagination.vue'
export default {
  data() {
    return {
      // 每页的数据数量
      companiesCount: 10,
      queryLandlordInput: '',
      dialogVisible: false,
      landLordData: [],
      userRole: '房东',
      identification: '',
      params: {
        page: 1,
        size: 10
      }
    }
  },
  methods: {
    // 分页跳转
    CurrentChange(currentPage) {
      // 把当前页码给当前页面
      this.params.page = currentPage

      if (this.identification === 1) {
        this.getLandLord()
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    async getLandLord() {
      const { data: res } = await getLandLordAPI({ userRole: this.userRole, page: this.params.page, size: this.params.size })
      if (res.code === 20031) {
        this.landLordData = res.data.list
        this.companiesCount = res.data.totalElements
        this.identification = 1
      }
    }
  },
  created() {
    this.getLandLord()
  },
  components: { pagination }
}
</script>
<style scoped>
.pagination {
  text-align: center;
}
</style>
